<template>
  <PiCollapse :collapseList="formList" v-model="activeNames">
    <template #default="{ item }">
      <el-row v-for="(array, j) in item.list" :key="j">
        <el-col
          v-for="el in array"
          :key="el.name"
          :span="24 / array.length"
          style="display: inline-flex"
        >
          <span class="label">{{ el.label }}：</span>
          <el-button
            v-if="el.dataType.includes('TypeInstanceIdentifier')"
            type="primary"
            link
            @click="openOther(el)"
          >
            {{ el.displayValue }}
          </el-button>
          <span v-else class="value">{{ el.displayValue }}</span>
        </el-col>
      </el-row>
    </template>
  </PiCollapse>
</template>

<script setup name="baseInfo">
const { formList } = defineProps({
  formList: {
    type: Array,
    default: () => {
      return [];
    },
  },
});
const activeNames = computed(() => {
  return formList.map((item) => {
    return item.name;
  });
});
</script>

<style lang="less" scoped>
.label {
  line-height: 23px;
  color: var(--el-text-color-regular);
  flex-shrink: 0;
}
.value {
  color: var(--el-text-color-regular);
}
</style>
